<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <title>支付</title>
    <script type="text/javascript" src="js/fontSize.js"></script>
    <link rel="stylesheet" type='text/css' href="css/reset.css">
</head>
<body>
    <!-- 选择银行卡 -->
    <div class="bank-wrap">
        <div class="bank-com swiper-container">
            <div class="bank-box swiper-wrapper">

                <div listData='1' class="bank-list bank-list-red swiper-slide">
                    <div class="list-wrap">
                        <!-- 银行卡类型账号 -->
                        <div class="con-top">
                            <div class="bank-title">
                                <div class="title-left">
                                    <img src="images/img_zhaos.png" class="img">
                                    <span class="title-name">招商银行</span>
                                </div>
                                <div class="title-right"><img src="images/img_yingl.png" class="img"></div>
                            </div>
                            <div class="bank-num">
                                <span class="span">****</span>
                                <span class="span">****</span>
                                <span class="span">****</span>
                                <span class="span">9945</span>
                            </div>
                        </div>
                        <!-- 银行卡信息 -->
                        <div class="con-bottom">
                            <div class="bottom-com">还款计划</div>
                            <div class="use-class">
                                <div class="use-left">账单日：每日9号 / 还款日：每月11号</div>
                                <div class="use-right">姓名</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div listData='2' class="bank-list bank-list-blue swiper-slide">
                    <div class="list-wrap">
                        <!-- 银行卡类型账号 -->
                        <div class="con-top">
                            <div class="bank-title">
                                <div class="title-left">
                                    <img src="images/img_jians.png" class="img">
                                    <span class="title-name">建设银行</span>
                                </div>
                                <div class="title-right"><img src="images/img_yingl.png" class="img"></div>
                            </div>
                            <div class="bank-num">
                                <span class="span">****</span>
                                <span class="span">****</span>
                                <span class="span">****</span>
                                <span class="span">9945</span>
                            </div>
                        </div>
                        <!-- 银行卡信息 -->
                        <div class="con-bottom">
                            <div class="bottom-com">还款计划</div>
                            <div class="use-class">
                                <div class="use-left">账单日：每日9号 / 还款日：每月11号</div>
                                <div class="use-right">姓名</div>
                            </div>
                        </div>
                    </div>
                </div>


                <div listData='6' class="bank-list bank-list-yellow swiper-slide">
                    <div class="list-wrap">
                        <!-- 银行卡类型账号 -->
                        <div class="con-top">
                            <div class="bank-title">
                                <div class="title-left">
                                    <img src="images/img_youz.png" class="img">
                                    <span class="title-name">邮政银行</span>
                                </div>
                                <div class="title-right"><img src="images/img_yingl.png" class="img"></div>
                            </div>
                            <div class="bank-num">
                                <span class="span">****</span>
                                <span class="span">****</span>
                                <span class="span">****</span>
                                <span class="span">9945</span>
                            </div>
                        </div>
                        <!-- 银行卡信息 -->
                        <div class="con-bottom">
                            <div class="bottom-com">还款计划</div>
                            <div class="use-class">
                                <div class="use-left">账单日：每日9号 / 还款日：每月11号</div>
                                <div class="use-right">姓名</div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <div class="bank-pagination swiper-pagination">
                
            </div>
        </div>
    </div>
    <div class="money-wrap">￥<span class="num">0</span></div>
    <div class="paly-list">
        <div class="list-wrap">
            <div class="list list-num"><div class="span">1</div></div>
            <div class="list list-num"><div class="span">4</div></div>
            <div class="list list-num"><div class="span">7</div></div>
            <div class="list list-num"><div class="span">.</div></div>
        </div>
        <div class="list-wrap">
            <div class="list list-num"><div class="span">2</div></div>
            <div class="list list-num"><div class="span">5</div></div>
            <div class="list list-num"><div class="span">8</div></div>
            <div class="list list-num"><div class="span">0</div></div>
        </div>
        <div class="list-wrap">
            <div class="list list-num"><div class="span">3</div></div>
            <div class="list list-num"><div class="span">6</div></div>
            <div class="list list-num"><div class="span">9</div></div>
            <div class="list list-num"><div class="span">00</div></div>
        </div>
        <div class="list-wrap">
            <div class="list"><div class="span list-close-con"><icon class="icon-close"></icon></div></div>
            <div class="list"><div class="span list-null">清空</div></div>
            <div class="list list-shouK"><div class="span">收款</div></div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/swiper.jquery.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            autoplay: false, //切换时间
            paginationClickable: false, //循环运行
            loop : false, //不会回到位置
            autoplayDisableOnInteraction: false //滑动以后还可以自动滚动
        });

        // 点击数字
        $('.list-num .span').on('click', function () {
            var text = $(this).text(),
                num = $('.money-wrap .num').html();
            if (num.indexOf('.') > 0) { // 判断是否重复 . 
                if (num.toString().split(".")[1].length > 1) {
                    return false;
                }         
            }
            if (text == '.') {
                if (num.indexOf('.') > 0) { // 判断是否重复 . 
                    return false;
                }
                $('.money-wrap .num').html(num + text);
                return false;
            }
            // 为0
            if (num == '0') {
                if (text != '00') {
                    $('.money-wrap .num').html(text);
                }
                return false;
            }
            $('.money-wrap .num').html(num + text);
        });
        // 清空
        $('.list-wrap .list-null').on('click', function () {
            $('.money-wrap .num').html('0')
        });
        // 退格
        $('.list-close-con').on('click', function () {
            var num = $('.money-wrap .num').html();
            num = num.substring(0,num.length - 1)
            if (num.length == 0) {
                $('.money-wrap .num').html(0);
                return false;
            }
            $('.money-wrap .num').html(num);
        });

        //收款
        $('.list-shouK .span').on('click', function () {
            var num = $('.money-wrap .num').html() - 0, // 获取金额
                bankClass = $('.swiper-slide-active').attr('listdata'); // 获取银行卡类型
            alert('金额：' + num);
            alert('银行卡类型：' + bankClass);
            $.ajax({
                url: '',
                type: 'POST',
                typeData: 'json',
                data: {
                    money: num,
                    bankClass: bankClass
                },
                success: function (data) {
                    alert('收款成功！');
                },
                error: function (data) {
                    alert('收款失败！');
                }
            });
        });
    </script>
</body>
</html>